<script setup lang="ts">
import UseBtn from '@/components/use-btn/index.vue'
import gradientBorderBtn from '@/static/images/statistics/gradient-border-btn.png'
import roomMessage from '@/hooks/roomMessageHooks'
import { AccountType, UserInfoItemModel } from '@/models/roomMessageModels'
import NotData from '@/components/NotData.vue'
import { StatisticsTab } from '@/models/sys'
import { avatarUrl } from '@/utils'

const props = defineProps<{
  id: number
  tabPosition: number
  isShowMenuDialog: boolean
}>()

const { ...callback } = roomMessage()
const listData = ref<UserInfoItemModel[]>([])
const paging = ref()

async function query(page: number, per_page: number) {
  if (props.id !== undefined) {
    const listData = await callback.notReplyUsers(props.id, page, per_page)
    paging.value.complete(listData)
  }
}

watch(
  () => props.tabPosition,
  () => {
    refresh()
  },
)

watch(
  () => props.isShowMenuDialog,
  () => {
    if (props.isShowMenuDialog) {
      refresh()
    }
  },
)

function refresh() {
  if (StatisticsTab.NoReply === props.tabPosition) {
    paging.value.refresh()
  }
}

function setReplied(id: number) {
  callback.setReplied(id, () => {
    listData.value = listData.value.filter((item) => item.id !== id)
  })
}

function openChat(item: UserInfoItemModel) {
  if (item.is_contact === 1) {
    wx.qy.openEnterpriseChat({
      externalUserIds: item.external_user_id,
      userIds: '',
      groupName: '',
      chatId: '',
      success: (res) => {
        console.log(res)
      },
      fail(err) {
        uni.showModal({
          title: '打开失败',
          content: JSON.stringify(err),
          showCancel: false,
          confirmText: '好的',
        })
      },
    })
  } else {
    wx.qy.openUserProfile({
      type: 2, // 1表示该userid是企业成员，2表示该userid是外部联系人
      userid: item.external_user_id, // 可以是企业成员，也可以是外部联系人
      success: function (res) {
        console.log(`success:${JSON.stringify(res)}`)
      },
      fail(err) {
        console.log(`fail:${JSON.stringify(err)}`)
        uni.showModal({
          title: '打开失败',
          content: JSON.stringify(err),
          showCancel: false,
          confirmText: '好的',
        })
      },
    })
  }
}
</script>

<template>
  <view class="mt-4">
    <view class="scroll-views">
      <z-paging
        ref="paging"
        loading-more-no-more-text="没有更多了"
        v-model="listData"
        @query="query"
        :fixed="false"
        :default-page-size="10"
      >
        <template #empty>
          <NotData text="暂无数据"></NotData>
        </template>
        <view v-for="(item, index) in listData" :key="index">
          <view class="round-corners linear-hor mt-2 ml-4 mr-4">
            <view>
              <wd-img :src="avatarUrl(item.avatar)" :width="40" :height="40" :radius="6"></wd-img>
            </view>
            <span style="width: 24rpx" />
            <wd-text :text="item.nickname" color="#2B2F36" size="16" :lines="1"></wd-text>
            <span class="spacer" />

            <view
              style="
                position: relative;
                display: flex;
                align-items: center;
                justify-content: center;
                width: 77px;
                height: 32px;
                margin-right: 16rpx;
              "
            >
              <wd-img :src="gradientBorderBtn" width="77" height="32" />
              <view
                style="position: absolute; font-size: 26rpx; font-weight: 400"
                @click="setReplied(item.id)"
              >
                设为已回
              </view>
            </view>
            <UseBtn
              v-show="item.account_type === AccountType.WeChat"
              :content="item.is_contact == 1 ? '私信' : '加好友'"
              :fontWeight="400"
              :fontSize="28"
              :width="item.is_contact == 1 ? 120 : 180"
              :height="64"
              @click="openChat(item)"
            ></UseBtn>
          </view>
        </view>
      </z-paging>
    </view>
  </view>
</template>

<style scoped lang="scss">
.round-corners {
  background: white;
  border-radius: 16rpx;
}

.linear-hor {
  display: flex;
  flex-direction: row;
  align-items: center;
  padding: 20rpx;
}

.spacer {
  flex-grow: 1;
}

.scroll-views {
  height: calc(1080rpx - 228rpx);
}
</style>
